<template>
  <!-- 标签在表情中展示组件 -->
  <div style="text-align: left;">
    <!-- tagGroupShowTable  click-->
    <el-popover :placement="placement" trigger="hover"
      v-if="tagGroup && (tagGroup.length > 1 || (tagGroup[0] && (tagGroup[0].groupName + tagGroup[0].tagName).length > 7))">
      <template>
        <div class="tag-flex-box" :style="{ maxWidth: maxWidth + 'px' }">
          <el-tag class="el-tag-tab-group" :key="index" v-for="(tag, index) in tagGroup" style="margin-bottom: 8px">
            {{ tag.groupName }}:{{ tag.tagName }}
          </el-tag>
        </div>
      </template>
      <div slot="reference" class="set-content">
        <el-tag :key="index" v-for="(tag, index) in tagGroup">
          {{ tag.groupName }}:{{ tag.tagName }}
        </el-tag>
      </div>
    </el-popover>
    <div v-else class="set-content">
      <el-tag :key="index" v-for="(tag, index) in tagGroup">
        {{ tag.groupName }}:{{ tag.tagName }}
      </el-tag>
    </div>
  </div>
</template>

<script>
export default {
  name: 'tagGroupShowTable',
  props: {
    maxWidth: {
      type: String,
      default: '270'
    },
    placement: {
      type: String,
      default: 'top'
    },
    tagGroup: {
      type: Array,
      default: () => []
    },
  },
}
</script>

<style lang="scss" scoped>
.tag-flex-box {
  display: flex;
  flex-wrap: wrap;
  // max-width: 300px;
}

.set-content {
  cursor: default;
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}

.el-tag-tab-group:nth-of-type(2) {
  margin-left: 0 !important;
}

.el-tag-tab-group:nth-of-type(1) {
  margin-right: 10px;
}
</style>
